window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var tmall_bd = document.querySelector('.tmall-bd');
    var arrow_l1 = document.querySelector('.arrow-l1');
    var arrow_r1 = document.querySelector('.arrow-r1');
    //鼠标经过显示左右箭头
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    tmall_bd.addEventListener('mouseenter', function () {
        arrow_l1.style.display = 'block';
        arrow_r1.style.display = 'block';
        clearInterval(timer1);
        timer1 = null;
    })
    //鼠标离开隐藏
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            arrow_r.click();
        }, 3000)
    })
    tmall_bd.addEventListener('mouseleave', function () {
        arrow_l1.style.display = 'none';
        arrow_r1.style.display = 'none';
        timer1 = setInterval(function () {
            arrow_r1.click();
        }, 3000)
    })
    //动态生成圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var focusWidth = focus.offsetWidth;
    var focusWidth1 = tmall_bd.offsetWidth;
    var box = document.querySelector('.box');
    var yeshu = document.querySelector('.yeshu')




    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li'); //创建li标签  需要引号!!!!
        //设置自定义属性
        li.setAttribute('index', i);
        ol.appendChild(li);//不需要引号
        //生成的同时 注册点击事件
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            //点击时 得到对应index
            var index = this.getAttribute('index');
            num = circle = index;
            animate(ul, -index * focusWidth)//移动距离等于 索引号乘以父盒子宽度  记得加负号
        })
    }
    ol.children[0].className = 'current'
    //克隆第一张图片
    var first = ul.children[0].cloneNode(true);//深克隆 会把子节点一起复制
    ul.appendChild(first);
    var first1 = box.children[0].cloneNode(true);//深克隆 会把子节点一起复制
    box.appendChild(first1);

    //右箭头功能实现
    var num111 = 0;
    var num11 = 0;
    var circle = 0;
    var num1 = 1;
    var flag = true;
    var flag1 = true;
    var right = function (ul, focusWidth,num) {
        animate(ul, -num * focusWidth, function () {
            flag = true; //打开节流阀
            flag1 = true;
        })
    }
    arrow_r.addEventListener('click', function (e) {
        //节流阀  防止图片切换过快
        if (flag) {
            flag = false;

            //圆圈跟随变化 
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }

            ol.children[circle].className = 'current';
            if (num111 == ul.children.length - 1) {
                ul.style.left = '0';
                num111 = 0;
            }
            num111++;
            right(ul, focusWidth,num111);

        }
        e.stopPropagation()



    });
    arrow_r1.addEventListener('click', function (e) {
        if (flag1) {
            flag1 = false;

            //动态改变页数
            num1++;
            if (num1 == box.children.length) {
                num1 = 1;
            }
            for (var i = 0; i < box.children.length; i++) {
                yeshu.innerHTML = num1;
            }
            if (num11 == box.children.length - 1) {
                ul.style.left = '0';
                num11 = 0;
            }
            num11++;
            right(box, focusWidth1,num11);
        }
        e.stopPropagation()


    });

    //左箭头功能实现
    var left = function (ul, focusWidth,num) {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth, function () {
            flag = true;
            flag1 = true;
        })

    }

    arrow_l.addEventListener('click', function (e) {
        if (flag1) {
        flag1 = false;
            //圆圈跟随变化 
            circle--;
            num111--;
            if (num111 < 0){
                num111 = ol.children.length - 1;
            }
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }

            ol.children[circle].className = 'current';
            left(ul, focusWidth,num111);

        }
        e.stopPropagation()



    })
    arrow_l1.addEventListener('click', function (e) {
        if (flag1) {
            flag1 = false;
            //动态改变页数
            num1--;
            if (num1 < 1) {
                num1 = box.children.length - 1;;
            }
            for (var i = 0; i < box.children.length; i++) {
                yeshu.innerHTML = num1;
            }
            left(box, focusWidth1,num11);

        }
        e.stopPropagation()


    })


    //自动播放功能实现
    var timer = setInterval(function () {
        arrow_r.click();//手动调用点击功能....

    }, 3000)
    var timer1 = setInterval(function () {
        arrow_r1.click();//手动调用点击功能....

    }, 3000)

})